<style>
    :root {
      --color: #4f81bd;
      --dark: #366092;
    }

    html {
      font-size: 16px;
    }

    body {
      box-sizing: border-box;
      margin: 0;
      font-size: 1rem;
      font-family: BlinkMacSystemFont, "Segoe UI", 'Microsoft YaHei';
      line-height: 1.5;
    }

    body * {
      box-sizing: inherit;
    }

    dl {
      margin: 0;
    }

    h1,
    h2 {
      margin: 0;
      font: inherit;
    }

    hr {
      margin: 0;
      border: 0;
      border-bottom: 4px solid var(--color);
      box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    }

    p {
      margin: 0;
    }

    .container {
      width: 860px;
      margin: 0 auto;
      padding: 2rem 0;
    }

    .clearfix {
      position: relative;
      overflow: auto;
    }

    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    .info_list {
      position: relative;
    }

    .info_list dt {
      position: absolute;
      top: 0;
      left: 0;
    }

    .text_bold {
      font-weight: 700;
    }

    /* header */

    .header_title {
      background-image: linear-gradient(#e5004e, #851f57);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 4em;
      font-weight: 700;
      font-style: italic;
      line-height: 1.2;
    }

    .header_sub {
      position: absolute;
      right: 0;
      bottom: 0;
      color: var(--color);
      font-size: 1.9em;
    }

    .header_info {
      padding: 1rem 0 2.5rem;
    }

    .header_address dd {
      padding-left: 3rem;
    }

    .header_order dt {
      width: 6rem;
      text-align: right;
    }

    .header_order dd {
      padding-left: 10rem;
      text-align: right;
    }

    /* content */

    main {
      margin-bottom: 1.5rem;
      padding-bottom: .5rem;
      border: 2px solid var(--dark);
    }

    .content_title {
      padding: .1rem .6rem;
      background-color: var(--color);
      color: #fff;
      font-size: 1.3em;
    }

    .content_box {
      padding: .5rem;
    }

    .content_footer {
      margin-top: 3rem;
    }

    .content_table {
      margin-bottom: 1rem;
      padding: 0;
    }

    .content_table table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
    }

    .content_table th,
    .content_table td {
      padding: .4rem;
      text-align: center;
    }

    .content_table th {
      width: 20%;
      padding: .2rem .4rem;
      background-color: var(--color);
      color: #fff;
    }

    .content_table tr th:first-child,
    .content_table tr td:first-child {
      text-align: left;
    }
    .content_table th:nth-last-child(1),
    .content_table th:nth-last-child(2),
    .content_table td:nth-last-child(1),
    .content_table td:nth-last-child(2) {
      text-align: right;
    }

    .content_table tr:nth-last-child(1) td {
      border-top: 2px solid var(--dark);
      border-bottom: 2px solid var(--dark);
    }

    .content_info {
      padding: 2rem 0;
    }

    .content_info .info_list {
      margin-left: 4rem;
    }

    .content_info dd {
      padding-left: 7rem;
    }

    /* footer */
    .footer_box {
      padding: .4rem .6rem;
    }

    .footer_touch {
      padding-right: 2rem;
    }

    .footer_touch dd {
      padding-left: 4rem;
    }
  </style>
  <div class="container">
    <header class="header_box">
      <div class="clearfix">
        <h1 class="header_title">SUNRUN</h1>
        <p class="header_sub">Invoice</p>
      </div>
      <hr>
      <div class="header_info clearfix">
        <div class="header_address fl">
          <dl class="info_list">
            <dt>Company:</dt>
            <dd><%=company%></dd>
          </dl>
          <dl class="info_list">
            <dt>Addres:</dt>
            <dd>4F HNA Tower</dd>
            <dd>No. 898 Puming Road</dd>
            <dd>Shanghai, China</dd>
          </dl>
        </div>
        <div class="header_order fr">
            <dl class="info_list">
              <dt>Trader:</dt>
              <dd><%=dealer%></dd>
            </dl>
            <dl class="info_list">
              <dt>Order No:</dt>
              <dd><%=orderNo%></dd>
            </dl>
            <dl class="info_list">
              <dt>Invoice No:</dt>
              <dd><%=deliveryNo%></dd>
            </dl>
            <dl class="info_list">
              <dt>Date:</dt>
              <dd><%=dealTime%></dd>
            </dl>
            <dl class="info_list">
              <dt>Page:</dt>
              <dd>1</dd>
            </dl>
        </div>
      </div>
    </header>
    <main>
      <h2 class="content_title">FOR ACCOUNT OF BUYERS BELOW</h2>
      <section class="content_box">
        <p>
          <%=shipName%> and jointly and severally Owners and/or managing Owners<br>
          and/or master and/or operators and/or managers<br>
          and/or Disponent Owners and/or charterers and/or<br>
          Fuk Hing Steamship Co., Ltd.
        </p>
        <p class="content_footer">
          <%=shipName%> at <%=destinationPort%> on <%=receiptTime%>
        </p>
      </section>
      <section class="content_box content_table">
        <table>
          <thead>
            <tr>
              <th>Product</th>
              <th>Quantity</th>
              <th>Unit</th>
              <th>Unit Price <%=currencyCode%></th>
              <th>Total <%=currencyCode%></th>
            </tr>
          </thead>
          <tbody>
			<%for(var index = 0; index < orderGoodsDelivery.length; index++) {%>
				<tr>
				  <td><%=orderGoodsDelivery[index].goodsName%></td>
				  <td><%=orderGoodsDelivery[index].goodsNum%></td>
				  <td><%=orderGoodsDelivery[index].goodsUnit%></td>
				  <td><%=orderGoodsDelivery[index].goodsPrice%></td>
				  <td><%=orderGoodsDelivery[index].goodsTotal%></td>
				</tr>
            <%}%>
			<tr>
              <td colspan="4">Total USD Excl.VAT</td>
              <td> <%=noVat%></td>
            </tr>
			<tr>
              <td colspan="4">VAT</td>
              <td><%=vat%></td>
            </tr>
			<tr>
              <td colspan="3">Total value in our account latest 01 August, 2017</td>
              <td>Total USD</td>
              <td><%=goodsTotalVat%></td>
            </tr>
          </tbody>
        </table>
      </section>
      <section class="content_box">
        <p class="text_bold">Please transfer payment to:</p>
        <div class="content_info">
          <dl class="info_list">
            <dt>Bank:</dt>
            <dd><%=bank%></dd>
          </dl>
          <dl class="info_list">
            <dt>Address:</dt>
            <dd><%=bankAddress%></dd>
          </dl>
          <dl class="info_list">
            <dt>Swift:</dt>
            <dd><%=swiftCode%></dd>
          </dl>
          <dl class="info_list">
            <dt>Account NO.:</dt>
            <dd><%=account%></dd>
          </dl>
          <dl class="info_list">
            <dt>Holder:</dt>
            <dd><%=accountHolder%></dd>
          </dl>
          <dl class="info_list">
            <dt>Currency:</dt>
            <dd><%=currencyCode%></dd>
          </dl>
          <dl class="info_list">
            <dt>Reference:</dt>
            <dd><%=orderNo%></dd>
          </dl>
        </div>
        <p>
          For payment later than <%=paymentTime%> an interest of 3 percentage per month will apply. Payment should be made in full with all charges for payer's account. Please be sure to state the Order Number 2017062602 when arranging payment in order for the money to be allocated against the correct invoice.
        </p>
      </section>
    </main>
    <hr>
    <footer class="footer_box clearfix">
      <div class="footer_address fl">
        <p><%=company%></p>
        <p>4F HNA Tower</p>
        <p>No. 898 Puming Road</p>
        <p>Shanghai, China</p>
      </div>
      <div class="footer_touch fr">
        <dl class="info_list">
          <dt>Phone:</dt>
          <dd><%=companyPhone%></dd>
        </dl>
        <dl class="info_list">
          <dt>Fax:</dt>
          <dd><%=companyFax%></dd>
        </dl>
        <dl class="info_list">
          <dt>E-mail:</dt>
          <dd><%=companyEmail%></dd>
        </dl>
      </div>
    </footer>
  </div>
